<script lang="ts" setup>
import tzLoading from '@/components/tz-loading.vue'
import { projectID, gethomeData, projectName } from '@/pages/dataManagement/common'

const appStore = useAppStore()
const userStore = useUserStore()

const tableData = ref([])
const loading = ref(true)


const router = useRouter()

// 分页
const pageSize4 = ref(10)
const currentPage4 = ref(1)
const total = ref(0)
const size = ref<ComponentSize>('default')
const disabled = ref(false)
const background = ref(false)

const handleSizeChange = (val: number) => {
  getData()
}
const handleCurrentChange = (val: number) => {
  getData()
}


const getData = () => {
  loading.value = true
  const isLineStore = getStorage('isLine')

  let Q = {
    // factoryid: userStore.userInfo.id,
    factoryid: isLineStore ? "" : userStore.userInfo.id,
    index: currentPage4.value,
    size: pageSize4.value
  }
  getProjectList(Q).then(res => {
    total.value = res.page.total
    tableData.value = res.result
  }).finally(() => loading.value = false)
}

getData()


const rouFn = (e) => {
  console.log(e)
  projectID.value = e.id
  projectName.value = e.name
  // gethomeData(true)

  let url = userStore.userInfo.auth == 1 ? '/dataManagement' : '/alarmApparatus'
  setTimeout(() => {
    router.push(url)
  }, 300)
}


</script>

<template>
  <tzLoading v-if="loading"></tzLoading>

  <div class="flex flex-col flex-1 overflow-auto" v-else>
    <div class="h-[13%]"></div>

    <div class="flex-1 p-[25px] overflow-auto">
      <el-table :data="tableData" class="" @row-click="rouFn" style="width: 100%;height: 100%;">

        <el-table-column prop="name" label="名称"></el-table-column>

        <el-table-column prop="eqiopmentid" label="设备id"></el-table-column>
        <el-table-column prop="id" label="项目id"></el-table-column>

        <el-table-column prop="type" label="状态 ">
          <template #default="scope">
            <div class="flex gap-[10px]">
              <el-tag :type="scope.row.type == 1 ? 'danger' : 'success'">{{ scope.row.type == 1 ? '告警' : '正常'
              }}</el-tag>
            </div>
          </template>
        </el-table-column>



      </el-table>
    </div>
    <div class="flex justify-center mb-[20px]">
      <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 20, 50, 100]"
        :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>





  </div>
</template>

<style scoped>
:deep(.el-table__row) {
  background-color: #f3fdf1;
}

:deep(th>.el-table__cell) {
  background-color: #0f914c;
}

:deep(.el-table th.el-table__cell) {
  background-color: #0e904c;
}


:deep(.el-table th.el-table__cell .cell) {
  color: #fff;
}
</style>
